<template>
  <div>
        <div v-if="detailFlag">
      <el-row>
        <el-col :span="3" tag="span">
          入库单详情页 <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="1.5" :offset="13">
          <el-button @click="pre">上一页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="next">下一页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="verify">审核</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-button @click="fail">驳回</el-button>
        </el-col>

        <el-col :span="1.5" >
          <el-button @click="closeDetail">关闭</el-button>
        </el-col>
      </el-row>
<!-- 显示详细信息 -->
      <el-row>基本信息 <el-divider direction="vertical"></el-divider></el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">出库编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.ckNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.goodsid" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">客户:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.custom" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品种类:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.category" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">入库来源:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.rkType" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">状态:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.status" :disabled="true" ></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品名字:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.name" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品模型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.productModel" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">成色:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.percenttage" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">区域:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.location" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">仓库:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.repositoryNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">类型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.type" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">条码:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.barCode" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">重量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.weight" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">数量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.nums" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">加工费:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.processingfee" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makePerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makeTime" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verfyPerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verifyTime" :disabled="true"></el-input>
        </el-col>

      </el-row>




      <el-divider></el-divider>
    </div>

    <!-- 第一行 -->
    <el-row>
      <el-col :span="2.5" >
        <el-select v-model="type" placeholder="请选择商品种类" @change="changecategory()" style="width: 150px;">
          <el-option
            v-for="item in categorys"
            :key="item.id"
            :type="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5" >
        <el-select v-model="cktype1" placeholder="请选择出库类型" @change="changecktype()" style="width: 150px;">
          <el-option
            v-for="item in ckTypes"
            :key="item.id"
            :cktype1="item.ckType"
            :value="item.ckType">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2.5" >
        <el-select v-model="rktype2" placeholder="请选择订单状态" @change="changestatus()" style="width: 150px;">
          <el-option
            v-for="item in statuss"
            :key="item.id"
            :rktype2="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="date"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button type="primary" @click="cksearch()" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button circle icon="el-icon-delete-solid"  @click="clear()"></el-button>
        <el-button circle icon="el-icon-refresh" @click="refresh()"></el-button>
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <el-row>
      <el-col :span="2.5">
        <el-button icon="el-icon-plus">
          <router-link to="/menu/add_ck" tag="span">
            新增出库
          </router-link>
        </el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col :span="1"><div> &nbsp;</div></el-col>
      <el-col :span="4">
        <el-input v-model="input" placeholder="请输入订单编号"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button circle icon="el-icon-delete-solid" @click="clear1()"></el-button>
      </el-col>
    </el-row>

<!-- 表格
     <el-table
    :data="tableData"
    style="width: 100%;text-align: center">
    <el-table-column
      prop="id"
      label="序号"
      width="80">
    </el-table-column>
       <el-table-column
         prop="name"
         label="名称"
         width="180">
       </el-table-column>
    <el-table-column
      prop="ckNo"
      label="单号"
      width="250">
    </el-table-column>
    <el-table-column
      prop="custom"
      label="客户"
      width="150">
    </el-table-column>
     <el-table-column
       prop="rkType"
       label="类型"
       width="150">
     </el-table-column>
       <el-table-column
         prop="location"
         label="区域"
         width="150">
       </el-table-column>
       <el-table-column
         prop="status"
         label="状态"
         width="100">
       </el-table-column>
       <el-table-column
         prop="percenttage"
         label="成色"
         width="150">
       </el-table-column>
       <el-table-column
         prop="weight"
         label="重量"
         width="100">
       </el-table-column>
       <el-table-column
         prop="nums"
         label="数量"
         width="100">
       </el-table-column>
       <el-table-column
         prop="processingfee"
         label="克供费"
         width="100">
       </el-table-column>
       <el-table-column
         prop="makeTime"
         label="日期"
         width="180">
       </el-table-column>
  </el-table> -->
  <!-- 表格 -->
     <el-table
     :key="refreshKey"
    :data="tableData"
    ref="singleTable"
    header-align
    highlight-current-row
    @current-change="handleCurrentChangeA"
    @row-click="rowClick"
    :row-class-name="rowClassName"
    style="width: 100%">
    <el-table-column
      header-align="center"
      align="center"
      type="index"
      width="80">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="ckNo"
      label="出库编号"
      width="180">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="custom"
      label="客户"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="category"
      label="商品种类"
      :formatter="categoryFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="ckType"
      label="出库方式"
      :formatter="ckTypeFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="status"
      label="状态"
      :formatter="statusFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="name"
      label="产品名字"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="repositoryNo"
      label="仓库"
      width="160">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="weight"
      label="重量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="nums"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="makePerson"
      label="提单人"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="verfyPerson"
      label="审核人"
      width="120">
    </el-table-column>

  </el-table>
  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="1"
    :page-sizes="[13]"
    :page-size="13"
    layout="total, sizes, prev, pager, next, jumper"
    :total=this.pageinfo.total>
  </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      refreshKey:0,
      detailFlag:false,
      input:"",
      date:['null','null'],
      tableData: [],
      rowData:{},
      pageinfo:[],
      sizeEveryPage:0,
      val:'1',
      categorys:[],
      ckTypes:[],
      statuss:[],
      type:'',
      cktype1:'',
      rktype2:'',
      CKseach:{
        category:0,
        cktype:0,
        status:0,
        startdate:{},
        enddate:{},
        pn:''
      }
    }
  },
  methods:{
        //审核
    verify(){
      if(this.rowData.status != "1"){
        this.$message.error("当前表不能审核~");
        return;
      }else{
        //alert("去审核");
        this.rowData.verfyPerson = this.$store.state.grades.account;
        console.log(this.rowData);
        this.axios({
          method:'post',
          url:this.baseUrl+'ckTable/verify',
          data:JSON.stringify(this.rowData),
          headers:{
            "Content-Type": "application/json; charset=UTF-8"
          }
        }).then(res=>{
          if(res.data.status == 'ResultEnum.SYSTEM_BUSY'){
            this.$message.error(res.data.message);
          }else{
            this.rowData = res.data.data;
            this.tableData[this.index] = res.data.data;
            this.$message({
              message:"审核成功~",
              type:'success'
            });
            this.refreshKey++;//重新渲染数据
          }
        })
      }

    },
    //驳回
    fail(){
      if((this.rowData.status != '4') && (this.rowData.status != '3')){
        this.axios({
          method:'post',
          url:this.baseUrl+'ckTable/fail',
          data:JSON.stringify(this.rowData),
          headers:{
            "Content-Type": "application/json; charset=UTF-8"
          }
        }).then(res=>{
          if(res.data.status == 'ResultEnum.SYSTEM_BUSY'){
            this.$message.error(res.data.message);
          }else{
            this.rowData.status = 3;
            this.tableData[this.index].status = 3;
            this.$message({
              message:"成功驳回~",
              type:'success'
            });
            this.refreshKey++;//重新渲染数据
          }
        })
      }else{
        this.$message({
                message:"该表单不能驳回~",
                type:'warning'
        });
      }
    },
    //上一页
    pre(){
      if(this.index === 0){
        this.$message.error("已经是第一页了~");
        return;
      }
      this.index = this.index-1;
      this.rowData = this.tableData[this.index];

      //高亮显示用
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //下一页
    next(){
      if(this.index === this.sizeEveryPage-1){
        this.$message.error("已经是最后一页了~");
        return;
      }
      this.index = this.index+1;
      this.rowData = this.tableData[this.index];
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //关闭详细信息
    closeDetail(){
      console.log(this.detailFlag);
      this.detailFlag = false;
    },
        //将行索引放进row
    rowClassName({row,rowIndex}){
      row.index = rowIndex;
    },
        //显示点击行的详细信息
    rowClick(row){
      this.rowData = this.tableData[row.index];
      this.index = row.index;
      this.detailFlag = true;
    },
    handleCurrentChangeA(val) {
      this.rowData = val;
    },
    handleCurrentChange(val) {
        this.rowData = val;
    },
    search(){
      var patter=/^[C][K]([0-9]{13})$/;
      if (patter.test(this.input)) {
        this.axios.get(this.baseUrl+"ckTable/findByckno/"+this.input)
          .then(res =>{
            this.tableData=res.data.data.list;
            this.pageinfo=res.data.data;
            this.detailFlag = false;
            console.log(res);
          })
      }else {
        this.$message.error("订单格式输入错误！\t\n 请输入正确格式");
      }
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.val=val;
      //console.log(this.tableData);
      this.cksearch();
      //console.log(this.tableData);
    },

    refresh(){
      this.handleCurrentChange(this.val);
      this.detailFlag = false;
    },
    changecategory(){
      for (const categoryKey of this.categorys) {
        if(categoryKey.type===this.type){
          this.CKseach.category=categoryKey.id;
        }
      }
    },
    changecktype(){
      //console.log("ckType"+this.ckTypes[0]);
      for (const categoryKey of this.ckTypes) {
        if(categoryKey.ckType===this.cktype1){

          this.CKseach.cktype=categoryKey.id;
        }
      }
    },
    changestatus(){
      for (const categoryKey of this.statuss) {
        if(categoryKey.type===this.rktype2){
          this.CKseach.status=categoryKey.id;
        }
      }
    },
    cksearch(){
      let val=this.val;
      this.CKseach.startdate=this.date[0];
      this.CKseach.enddate=this.date[1];
      if(this.CKseach.startdate=="null"){
        let date=new Date();
        this.CKseach.startdate=date-date;
        this.CKseach.enddate=date-date;
      }
      this.CKseach.pn=val;
      console.log(this.CKseach)
      this.axios.post(this.baseUrl+"ckTable/selectAll",this.CKseach)
        .then(res =>{
          console.log(res.data.data)
          this.tableData=res.data.data.list
          this.pageinfo=res.data.data
          this.sizeEveryPage = res.data.data.size;

        })
    },
    clear(){
      this.CKseach.pn=1;
      let date=new Date();
      this.date=['null','null']
      this.CKseach.startdate=date-date;
      this.CKseach.enddate=date-date;
      this.CKseach.status=0;
      this.CKseach.category=0;
      this.CKseach.rktype=0;
      this.type='';
      this.cktype1='';
      this.rktype2='';
      this.input=''
      this.$message.error("清空查询数据，展示所有数据");
      this.axios.post(this.baseUrl+"ckTable/selectAll",this.CKseach)
        .then(res =>{
          console.log(res.data.data);
          this.tableData=res.data.data.list;
          this.pageinfo=res.data.data;
          this.sizeEveryPage = res.data.data.size;
        })
    },
    clear1(){

      this.input=''
    },
      //转换信息的显示
    statusFormatter(val){
      //console.log(val.status);
      if(val.status == '1'){
        return "未审核";
      }else if(val.status == '2'){
        return "成功";
      }else{
        return '失败';
      }
    },
    categoryFormatter(val){
      if(val.category == '1'){
        return "黄金";
      }else if(val.category == '2'){
        return "铂金";
      }else if(val.category == '3'){
        return "钻石";
      }else if(val.category == '4'){
        return "宝玉";
      }
    },
    ckTypeFormatter(val){
      if(val.ckType == '1'){
        return '销售出库';
      }else if(val.ckType == '2'){
        return '调拨出库';
      }
    },


  },
  created(){
    this.handleCurrentChange(this.val);
    this.axios.get(this.baseUrl+"type/ckAll")
      .then(res =>{
        console.log(res.data.data);
       this.categorys=res.data.data[0];
       this.ckTypes=res.data.data[1];
       this.statuss=res.data.data[2];
       this.sizeEveryPage = res.data.data.size;
      })
  }
}
</script>


<style scoped>

</style>
